<template>
	<!-- #ifdef MP-WEIXIN -->
	  <ws-wx-privacy id="privacy-popup" :page="0"></ws-wx-privacy>
	<!-- #endif -->
	<view class="index">
		<view class="index-head-search">
			<view style="margin:0 20rpx">
				<xl-search placeholder="请输入搜索内容" disabled :height="35" shape="square" @click="gosearch"></xl-search>
			</view>
			<view class="slide">
				<uv-swiper :list="bannerList" keyName="img" height="180" indicator indicatorMode="line" circular
					style="width:100%" imgMode="aspectFill" radius="0" :autoplay="false"></uv-swiper>
			</view>
		</view>
		<view class="index-Item">
			<view class="filter uni-row" style="justify-content: space-between">
				<view class="uni-row" style="align-items:flex-end">
					<view :class="['tab',cur==0?'cur':'']" @click="set_lid(0)">全部</view>
					<view :class="['tab',cur==1?'cur':'']" @click="set_lid(1)">地方</view>
					<view :class="['tab',cur==2?'cur':'']" @click="set_lid(2)">省直</view>
				</view>
				<view class="status_filter">
					 <uv-drop-down sign="dropDown_1" text-color="#666">
						<uv-drop-down-item name="order" :label="dropDownValue" value="all">
						</uv-drop-down-item>
					</uv-drop-down>
					<uv-drop-down-popup sign="dropDown_1" ref="dropDown">
						<view
							style="flex:1;height:100rpx;background-color: #fff;margin-top:30rpx;border-top:1px solid #eee;padding:30rpx;display: flex;justify-content: space-around">
							<text :class="['status_text',status_cur==key?'cur' : '']" @click="set_status(key)"
								v-for="(dropItem,key) in dropDown_ary">{{dropItem}}</text>
						</view>
					</uv-drop-down-popup>
				</view>
			</view>
			<view v-if="listData?.list?.length<=0 || !listData.list" style="padding-top:100rpx;">
				<uv-loading-icon></uv-loading-icon>
			</view>
			<z-paging ref="paging" v-model="listData.list" @query="queryList" show-refresher-when-reload
				use-page-scroll>
				<scroll-view v-for="(item,pki) in listData.list" :key="item.wid" @click="goView(item.wid)"
					v-if="listData?.list?.length>0">
					<view class="content">
						<image :src="`/static/icon/biaozhi${item.status}.png`" class="status" mode="widthFix"></image>
						<view class="List-item">
							<view class="title">
								<text class="titleText">{{ item.title }}</text>
							</view>
							<view class="desc" v-html="item.content"></view>
							<view class="album" v-if="item.image.length>0">
								<uv-album :urls="item.image" singleMode="widthFix" keyName="temp" :rowCount="3"
									multipleSize="80" maxCount="3"></uv-album>
							</view>
							<view class="footer">
								<view class="type " style="align-items: center">
									<text class="t" style="font-size:14px;">{{ item.type }}</text>
								</view>
								<view class="time" style="align-items: center">
									<!--                  <x-icon name="timer-2-line" color="#999" class="tagsicon" fontSize="14"-->
									<!--                          style="margin-right:2px"></x-icon>-->
									<text class="t" style="font-size:14px">{{ item.create_time }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</z-paging>
		</view>
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :bottom="70"></uv-back-top>
		<uv-safe-bottom></uv-safe-bottom>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		getIndexLunbo,
		fetchThreadData
	} from "../../common/api";


	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	onMounted(() => {
		// #ifdef MP-WEIXIN
			doRequire()
		// #endif
	})
	const doRequire = () => {
		// #ifdef MP-WEIXIN
			uni.requirePrivacyAuthorize({
				success: () => {

				},
				fail: () => {
					console.log('拒绝');
				}, // 用户拒绝授权
				complete: () => {}
			})
		// #endif
	}
	const paging = ref(null);
	useZPaging(paging)
	const cur = ref(0)
	const status_cur = ref(0)
	const scrollTop = ref(0)
	onPageScroll(e => {
		scrollTop.value = e.scrollTop
	})
	const search_keywords = ref('')
	const bannerList = ref([]);
	const dropDown = ref(null)
	const dropDownValue = ref('回复状态')
	const dropDown_ary = ref(['不限', '已办结', '待回复', '已转交']);
	const listData = reactive({})
	//获得轮播图
	getIndexLunbo().then(r => {
		if (r.code == 200) {
			bannerList.value = r.data
		}
	})
	const set_status = (status) => {
		status_cur.value = status
		dropDownValue.value = dropDown_ary.value[status]
		dropDown.value.close()
		paging.value.reload()
	}
	const set_lid = (lid) => {
		cur.value = lid
		paging.value.reload()
	}
  const gosearch = () => {
		uni.navigateTo({
			url: '/pages/index/search?keywords'
		})
	}
	const queryList = (pageNo, pageSize) => {
		const params = {
			page: pageNo,
			type: 0,
			classifyAry: '',
			lid: cur.value,
			filterStatusValue: status_cur.value
		}
		fetchThreadData(params).then(r => {
			//将content中的[查看原文]替换
			r.data.map(item => {
				//去掉type的\r\n
				item.type = item.type.replace(/[\r\n\s]+$/, '')
				item.content = item.content.replace('...[查看原文]',
					'<span  style="color:rgb(95, 177, 250)">...[查看原文]</span>')
			})
			paging.value.complete(r.data);
		})
	}
	const goView = (wid) => {
		uni.navigateTo({
			url: '/pages/thread/view?wid=' + wid
		})
	}
</script>

<style lang="scss" scoped>
	.slide {
		margin-top: 20rpx;
	}

	.search {
		display: flex;
		flex-direction: row;
		align-items: center;

		.logo {
			flex: 1;
			width: 80rpx;
		}

		.searchIpt {
			flex: 1;
			background-color: rgb(242, 242, 242);
			border-radius: 100px;
			border-color: transparent;

			.input {
				height: 32px;
			}
		}

		.add {
			flex: 1;
			width: 80rpx;
		}

		.logoimg {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
		}
	}

	.index-head-search {
		//padding
		background-color: #fff;
	}

	.bannerImg {
		margin: 20rpx 0;
		width: 100%;
	}

	.filter {
		background: #fff;
		padding: 25rpx;
		position: sticky;
		top: 0;
		z-index: 30;

		.status_text {
			color: #666;

			&.cur {
				color: $baseColor;
			}
		}

		.tab {
			margin-right: 30rpx;
			font-size: 30rpx;
			color: #666;

			&.cur {
				color: $baseColor;
				font-weight: bold;
				font-size: 34rpx;
			}
		}
	}

	.content {
		padding: 0 30rpx;
		position: relative;

		.status {
			position: absolute;
			right: 40rpx;
			top: 20rpx;
			z-index: 10;
			width: 160rpx;
			transform: rotate(40deg);
			opacity: .6;
		}

		.List-item {
			background-color: #fff;
			margin-top: 30rpx;
			border: 14px;
			padding: 0 30rpx 30rpx 40rpx;
		}

		.title {
			border-bottom: 1px solid #eee;
			padding: 30rpx 0 15rpx 0;
			display: flex;
			flex-direction: column;

			.titleText {
				font-size: 18px;
				line-height: 25px;
			}

			.font {
				margin-right: 2px;
			}
		}

		.album {
			margin-top: 20rpx;
		}

		.desc {
			//只显示2行
			overflow: hidden;
			text-overflow: ellipsis;
			//display: -webkit-box;
			//-webkit-line-clamp: 2;
			//-webkit-box-orient: vertical;
			font-size: 30rpx;
			color: #333;
			line-height: 45rpx;
			margin-top: 15rpx;
		}

		.thumb {
			margin-top: 10px;
		}

		.footer {
			width: 100%;
			justify-content: space-between;
			display: flex;
			margin-top: 30rpx;

			.type,
			.time {
				display: flex;

				>.font,
				.t {
					color: $defindCur;
					font-size: 26rpx;
				}
			}
		}

	}
</style>
